<template>
    <div class="container">
        <!-- 搜索盒子 -->
        <div class="search-box">
            <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
            <input
                class="search-input"
                confirm-type="search"
                placeholder="搜索客户名称"
                placeholder-style="color: #9EA1BB;letter-spacing:2rpx;"
                @input="inputEnter"
            />
        </div>
        <!-- 筛选栏 -->
        <div class="manipulate">
            <div class="complete">全部（{{totalCount}}）</div>
            <div class="total">
                <div class="merchandise">
                  <picker @change="bindPickerChangeMethodAll" :value="sortIndexMethodAll" :range="LongPlanInfoNameAll">
                    <view class="uni-input">{{ LongPlanInfoNameAll[sortIndexMethodAll] }}</view>
                  </picker>
                    <image
                        class="merchandis-resource"
                        src="/static/my-client/dropdown.png"
                    />
                </div>
                <div class="compositer">
                  <picker @change="bindPickerChangeMethod" :value="sortIndexMethod" :range="LongPlanInfoName">
                    <view class="uni-input">排序</view>
                  </picker>
                    <image
                        class="compositer-resource"
                        src="/static/my-client/reorder.png"
                    />
                </div>
            </div>
        </div>
        <div class="substance" v-for="(item) in data"  :key="item.companyId" @click="goCompany(item.companyId,item.dealId)">
            <div class="corporation">{{item.companyName}}</div>
            <div class="autograph">
                签单：
              <div class="remark" v-if="item.isOpenPeriod == 1">{{ item.isOpenPeriod == 1? '长期保' : '' }}</div>
              <div class="remark" v-if="item.isOpenWesure == 1">{{ item.isOpenWesure == 1? '日日保' : '' }}</div>
              <div class="remark" v-if="item.isOpenEleSign == 1">{{ item.isOpenEleSign == 1? '电子签' : '' }}</div>
              <div class="remark" v-if="item.isOpenPaySalary == 1">{{ item.isOpenPaySalary == 1? '子弹发薪' : '' }}</div>
              <div class="remark" v-if="item.signCount == 0">{{ item.isOpenPaySalary == 0? '暂无' : '' }}</div>
            </div>
            <div class="staff">
                员工库人数：
                <div class="staff-quantity">{{item.employeeLibrary === 0? 0 : item.employeeLibrary}}人</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getMyClient } from '@/api/quick'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import user from '@/utils/user'
import { ref } from 'vue'
import { number } from '@intlify/core-base'
import { shake } from '@/utils/util'

onLoad(async () => {
    await user.waitLogin()
    myClient()
})
const pageNum = ref(1)

// 到达底部
const hasNextPage = ref(true)
onReachBottom(() => {
    if (!hasNextPage.value) {

    } else {
        pageNum.value += 1
        myClient()
    }
})

// 我的客户接口
const data = ref()
const totalCount = ref(0)
const myClient = async () => {
    if (pageNum.value === 1) {
        data.value = []
        pageNum.value = 1
        hasNextPage.value = true
    }
    const result = await getMyClient({
        productType: sortIndexMethodAll.value === 0 ? '' : (sortIndexMethodAll.value - 1) < 0 ? '' : (sortIndexMethodAll.value - 1),
        searchText: inputValue.value,
        sortOrder: sortIndexMethod.value,
        pageNum: pageNum.value,
        pageSize: 50
    })
    console.log(result, '我的客户接口')
    // data.value = result   // 别慌看清代码
    // console.log(data.values.sign.todaySign, '其他数据统计赋值')
    totalCount.value = result.totalCount

    console.log(result, '电子签充值明细')
    // chargeDetailData.value = result
    if (!result.hasNextPage) {
        hasNextPage.value = false
    }
    console.log(hasNextPage.value, '小起小起')
    const arr = []
    arr.push(...data.value)
    arr.push(...result.list)
    data.value = arr
    console.log(data.value, 'longInsuranceData')
}

/* 全部产品 弹窗 */
const sortIndexMethodAll = ref(0)
const LongPlanInfoNameAll = ref(['全部产品', '子弹发薪', '电子签', '日日保', '长期保', '其他'] as string[])
const bindPickerChangeMethodAll = async function (e: any) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    sortIndexMethodAll.value = e.detail.value
    pageNum.value = 1
    await myClient()
}

/* 排序 弹窗 */
const sortIndexMethod = ref(0)
const LongPlanInfoName = ref(['按签单数降序', '按签单数升序', '按员工库人数降序', '按员工库人数升序'] as string[])
const bindPickerChangeMethod = async function (e: any) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    sortIndexMethod.value = e.detail.value
    pageNum.value = 1
    await myClient()
}

// input框输入事件
const inputValue = ref('')
const inputEnter = (e:any) => {
    shake(() => {
        console.log(e.detail.value, 'eeeeeany')
        inputValue.value = e.detail.value
        pageNum.value = 1
        myClient()
    }, 300)
}

const goCompany = (companyId:number, dealId:number) => {
    console.log(companyId, '公司id', dealId, 'dealId')
    const company = companyId
    const deal = dealId
    uni.navigateTo({
        url: '/packageRemind/pages/customer-detail/index?id=' + companyId + '&dealId' + deal
    })
}

</script>
<style lang="scss" scoped>
.container {
    background: $white;
    padding: 30rpx;
    box-sizing: border-box;
    height: 100%;
}
.search-input {
    background: #fff;
}
.manipulate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32rpx;
    .complete {
        font-size: $font-normal;
        font-weight: 400;
        color: $grey;
    }
    .total {
        display: flex;
        align-items: center;
        .merchandise {
            @include flex-between;
            font-size: $font-normal;
            font-weight: 400;
            color: #565868;
            margin-right: 35rpx;
        }
        .compositer {
            @include flex-between;
            font-size: $font-normal;
            font-weight: 400;
            color: #565868;
        }
    }
    .merchandis-resource {
        width: 28rpx;
        height: 28rpx;
        margin-left: 8rpx;
    }
    .compositer-resource {
        width: 28rpx;
        height: 28rpx;
        margin-left: 8rpx;
    }
}
.substance {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-sizing: border-box;
    margin-top: 30rpx;
    .corporation {
        padding-bottom: 30rpx;
        font-size: 32rpx;
        font-weight: 600;
        color: #202536;
    }
    .autograph {
        display: flex;
        align-items: center;
        color: $grey;
        font-size: $font-normal;
        border-top: 1px solid #f4f4f7;
        padding: 24rpx 0 16rpx 0;
        .remark {
            padding: 8rpx 16rpx 11rpx 16rpx;
            background: #f4f4f7;
            margin-right: 16rpx;
            font-size: $font-base;
            color: #565868;
            border-radius: 4rpx;
        }
    }
    .staff {
        display: flex;
        align-items: center;
        font-size: $font-normal;
        font-weight: 400;
        color: #9497b1;
        .staff-quantity {
            color: $black;
        }
    }
}
</style>
